
import React, { useState } from 'react';
import classnames from 'classnames';
import { Popover } from 'maycur-antd';
import 'maycur-antd/lib/popover/style/css';

function genStyle(styles = {}) {
    let r = {};
    let styleProps = ['color','cursor'];
    styleProps.forEach(n => {
        if (n in styles) r[n] = styles[n];
    })
    return r;
}

function Icon(props) {
    const { invoice, label, icon } = props;
    const [iconsState, setIconState] = useState(true);
    const handleClick = () => {
        typeof icon.onClick === 'function' && icon.onClick(invoice);
        if (icon.hasSwitchIcon) {
            setIconState(v => !v);
        }
    }
    let clsName = classnames('toolbar-icon');
    let iconCls = classnames('', {
        [icon.iconCls]: iconsState,
        [icon.negativeIconCls]: 'negativeIconCls' in icon && !iconsState,
    })
    let iconStyle = genStyle(icon?.styles);

    return (
        <div className={clsName} onClick={handleClick} style={iconStyle}>
            <Popover content={icon.desc} overlayStyle={icon.desc ? {} : { display: 'none' }}>
                <i className={iconCls}></i>
                {label && <span className="toolbar-icon-label">{label}</span>}
            </Popover>
        </div>
    )
}
export default Icon;